<template>
  <view>
    <up-tabbar
        :value="currentIndex"
        @change="switchTab"
        :fixed="true"
        :placeholder="true"
        activeColor="#fd7753"
        :safeAreaInsetBottom="true"
    >
      <up-tabbar-item v-for="item of list" :key="item.url" :text="item.name">
        <template #active-icon>
          <image class="icon" :src="item.activeIcon"></image>
        </template>
        <template #inactive-icon>
          <image class="icon" :src="item.icon"></image>
        </template>
      </up-tabbar-item>
    </up-tabbar>
  </view>
</template>

<script setup>
import {useTabBarStore} from '@/store/modules/tabBar'
import {storeToRefs} from 'pinia'
import {redirectTo, toPath} from "@/utils/commonUtils";

const tabBarStore = useTabBarStore()
const {list, currentIndex} = storeToRefs(tabBarStore)

function switchTab(val) {
  if (val === currentIndex.value) return
  tabBarStore.setCurrent(val)
  console.log(list.value[val])
  redirectTo(list.value[val].url)
}
</script>

<style lang="scss" scoped>
.icon {
  width: 50rpx;
  height: 50rpx;
}
</style>